<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>主页</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
        <script src="/js/vue.js"></script>
	</head>
	<body>
        <div id="app">
            <!-- Header -->
            <div class="header">
                <!-- 个性化标题 -->
                <div class="mytitle">
                    <label>母婴护理知识共享平台</label>
                </div>
                <!-- 导航栏 -->
                <div class="mymenu-content">
                    <ul class="mymenu">
                        <li><a href="">首页</a></li>
                        <li><a href="message.html">新生儿护理</a></li>
                        <li><a href="photos.html">寄语</a></li>
                        <li><a href="about.html">营养推荐</a></li>
                        <li><a href="aihao.html">疾病预防</a></li>
                        <li><a href="books.html">个人中心</a></li>
                    </ul>
                </div>
                <!-- 隐藏功能 -->
                <div class="other-functions">
                    <a href="login.html">登录</a>
                    <label>/</label>
                    <a href="register.html">注册</a>
                </div>
                <!-- 搜索框 -->
                <div class="query">
                    <input class="keyword" placeholder="搜索内容"/>
                    <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
                </div>
            </div>
            <!-- 个性签名 -->
            <div class="my-sign">
                <!--  包含标志和签名 -->
                <div class="my-signImg">
                    <img id="my-signImg" src="img/my-sign.gif">
                    <div class="my-signWord">
                        <span class="my-signTitle" id="my-signTitle">热门文章</span>
                        <div v-for="item in hot" :key="item.id">
                            <span class="my-signBody" id="my-signBody"><a href="">{{item.title}}</a></span><br>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Content -->
            <div class="main-content">
                <!-- 个人以及所有文章、留言、照片汇总 包含大分类以及小标签 左面版 -->
                <div class="my-totalContent">
                    <!-- 1.个人以及汇总部分 -->
                    <div class="blog-inTotal">
                        <!-- 头像 -->
                        <img src="img/IMG_1568.PNG">
                        <!-- 说明 -->
                        <span>——热门标签</span>
                        <!-- 各方面汇总(各项目以及数量) -->
                        <fieldset class="layui-elem-field">
                            <!-- 用于存放tags -->
                            <div class="layui-field-box" id="tagContent">
                                <span v-for="tag in tags" class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px;font-weight: 400;">
                                    {{ tag }}
                                </span>
                            </div>
                            
                        </fieldset>
                    </div>
                </div>
              <!-- 主体显示部分 右面板 -->
                <div class="content-body">
                    <!-- 单个文章面板 -->
                    <div class="blog-item" v-for="article in articles" :key="article.id">
                        <!-- 标题 -->
                        <p class="blog-title"><a href="./simpleBlog.html">{{ article.title }}</a></p>
                        <!-- 作者以及时间 -->
                        <p class="blog-author">—— {{ article.author }}  {{ article.date }}</p>
                        <img class="blog-img" :src="article.image"/>
                        <!-- 概要 -->
                        <p class="blog-des">{{ article.summary }}</p>
                        <p class="blog-tags">标签: {{ article.tags.join(' / ') }}</p>
                    </div>
                </div>

                <hr class="my-line">
            </div>
            
        </div>
        <script src="layui-v2.2.3/layui/layui.js"></script>
            <!-- 引入jquery js -->
            <script src="js/jquery-3.2.1.min.js"></script>
            <!-- 自定义 js -->
            <script src="js/index.js"></script>
            <script>
                $(function () {
                    //init
                    component.init();
                });
            </script>
	</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                hello:"helloWorld",
                hot:[
                    { id: 1, title: "婴儿洗澡的正确方法", link: "#" },
                    { id: 2, title: "如何给婴儿更换尿布", link: "#" },
                    { id: 3, title: "预防婴儿湿疹的方法", link: "#" },
                    { id: 4, title: "婴儿睡眠安全指南", link: "#" },
                    { id: 5, title: "哺乳期间妈妈的饮食注意事项", link: "#" }
                ],
                tags: [
                    "备孕须知",
                    "顺产经验",
                    "月子餐",
                    "宝宝辅食",
                    "母乳",
                    "断奶",
                    "胎教",
                    "饮食",
                    "奶粉"
                ],
                articles: [
                    { 
                        id: 1, 
                        title: "桃之夭夭，灼灼其华", 
                        author: "邱建红", 
                        date: "2017-12-18 12:03", 
                        image: "img/pic03.jpg", 
                        summary: "犹如一支山寺桃花般惊艳的你就这样在我世界里静静地除绽着。",
                        tags: ["日记", "遇见你"] 
                    },
                    { 
                        id: 2, 
                        title: "婴儿的睡眠技巧", 
                        author: "李小明", 
                        date: "2023-05-20 09:30", 
                        image: "img/pic01.jpg", 
                        summary: "如何让宝宝安稳地入睡，为宝宝提供良好的睡眠环境。",
                        tags: ["婴儿护理", "睡眠"] 
                    },
                    { 
                        id: 3, 
                        title: "婴儿喂养指南", 
                        author: "王大力", 
                        date: "2023-07-10 15:45", 
                        image: "img/pic02.jpg", 
                        summary: "介绍婴儿的喂养时间、方式和注意事项。",
                        tags: ["婴儿护理", "喂养"] 
                    },
                    { 
                        id: 4, 
                        title: "婴儿的健康检查", 
                        author: "张美丽", 
                        date: "2023-09-02 11:20", 
                        image: "img/pic07.jpg", 
                        summary: "婴儿的常规健康检查项目及其重要性。",
                        tags: ["婴儿护理", "健康"] 
                    }
                ]
            },
            // 创建就运行
            created() {
            
            },
            // 方法
            methods: {
            
            }
        })
    </script>
</html>
